<template>
	<div class="single-chart">
		<el-row>
			<el-col :xs="24" :sm="12">
				<common-pie :data="pieDataByArtists" :config="pieConfigByArtists">
				</common-pie>
				<p class="chart-title">艺术家分布饼图</p>
			</el-col>
			<el-col :xs="24" :sm="12">
				<common-pie :data="pieDataByTags" :config="pieConfigByTags">
				</common-pie>
				<p class="chart-title">作品标签分布饼图</p>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
import { defineProps, computed } from "vue";
import { IMP3Data } from "@/utils/useRequest";
import commonPie from "./common-pie.vue";
import { genPieDataByArtists, genPieDataByTags } from "@/utils/chart";

const props = defineProps<{
	data: IMP3Data[];
}>();

const pieConfigByArtists = {
	artist: { label: "艺术家" },
	count: { label: "总计" },
};
const pieDataByArtists = computed(() => genPieDataByArtists(props.data));

const pieConfigByTags = {
	tag: { label: "标签" },
	count: { label: "总计" },
};
const pieDataByTags = computed(() => genPieDataByTags(props.data));
</script>

<style lang="less">
p.chart-title {
	text-align: center;
	transform: translateY(-60px);
}
</style>
